<template>
  <div class="contanier">
    <div class="contanier-title">证书发放</div>
    <search-form>
      <template v-slot:formLeft>
        <el-form :inline="true" :model="userFormLine" class="demo-form-inline">
          <el-row>
            <!-- <el-col :span="6">
             <div class="grid-content bg-purple">
                <el-form-item label="收件人姓名" label-width="100px">
                  <el-input
                    v-model="userFormLine.keyword"
                    placeholder="请输入收件人姓名"
                    maxlength="16"
                    class="set-form-inline-btn"
                  ></el-input>
                </el-form-item>
              </div>
            </el-col> -->

            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="证书获取人姓名">
                  <el-input v-model="userFormLine.certUserName" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </div>
            </el-col>
            <!-- <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-form-item label="所属专题">
                  <el-input v-model="userFormLine.resourceName" placeholder="请输入" clearable></el-input>
                </el-form-item>
              </div>
            </el-col> -->
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="邮寄地址收件人姓名">
                  <el-select v-model="userFormLine.recipientUserName" placeholder="请选择" style="width: 100%;" clearable>
                    <el-option v-for="(item, index) in recipientUserList" :key="index" :label="item.recipientUserName" :value="item.recipientUserName" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="状态">
                  <el-select v-model="userFormLine.enabledMark" placeholder="请选择" style="width: 100%;" clearable>
                    <el-option v-for="(item, index) in enabledMarkOptions" :key="index" :label="item.fullName" :value="item.id" :disabled="item.disabled"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template v-slot:formRight>
        <div class="formRight-btn">
          <el-button
            icon="el-icon-refresh"
            class="overPosBtn"
            @click="clearFrom"
            style="width: 104px;"
            >重 置</el-button
          >
          <el-button
            type="primary"
            @click="onSearch"
            icon="el-icon-search"
            class="set-col-btn"
            style="width: 104px;"
            >查 询</el-button
          >
        </div>
      </template>
    </search-form>
    <div>
      <search-table>
        <template v-slot:daochu>
          <div class="set-table-right">
            <el-button @click="exportUser">
              <img src="@/assets/icon01.png" style="width: 20px; vertical-align: sub;">
              批量发放
            </el-button>
          </div>
        </template>
        <template v-slot:biaoge>
          <template>
            <el-table
              :key="tableKey"
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              class="table-top"
            >
              <el-table-column type="selection" width="55">
              </el-table-column>
              <el-table-column prop="certUserName" label="证书获取人姓名">
              </el-table-column>
              <el-table-column prop="certBy" label="证书获取单位名称">
              </el-table-column>
              <el-table-column prop="recipientUserName" label="邮寄地址收件人姓名" width="200">
              </el-table-column>
              <el-table-column prop="recipientUserPhone" label="收件人电话" width="130">
              </el-table-column>
              <el-table-column prop="recipientUserAdress" label="邮寄地址">
              </el-table-column>
              <el-table-column prop="enabledMark" label="状态">
                <template slot-scope="scope">
                  <div>
                    <span class="state-style-blue" ></span>
                    {{ scope.row.enabledMark | dynamicText(enabledMarkOptions) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="lastModifyUserId" label="发证人员">
              </el-table-column>
              <el-table-column prop="lastModifyTime" label="发证时间">
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="editCertRow(scope.row)"
                    type="text"
                    size="small"
                    :class="['set-table-btn', 'set-table-btn-col', scope.row.enabledMark == 1 ? 'disabled' : '']"
                    :disabled="scope.row.enabledMark == 1"
                  >
                    <img src="@/assets/icon02.png" style="width: 20px; vertical-align: sub;">
                    已发放
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </template>
        <template v-slot:fenye>
          <div class="set-table-pg-right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            >
            </el-pagination>
          </div>
        </template>
      </search-table>
    </div>
  </div>
</template>
<script>
import SearchForm from "@/components/search-form";
import SearchTable from "@/components/search-table";
import { getTemsCertUserNameList, getTemsCertUserSimpleAllList, batchRemove } from "@/api/exam/index";
export default {
  name: "CertIssuance",
  components: {
    SearchForm,
    SearchTable,
  },
  data() {
    return {
      enabledMarkOptions:[{"fullName":"未发放","id":"0"},{"fullName":"已发放","id":"1"}],
      recipientUserList: [],
      userFormLine: {
        certUserName: '',
        recipientUserName:undefined,
        resourceId:undefined,
        resourceName: '',
        enabledMark:undefined,
      },
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      tableKey: 0,
    };
  },
  created() {
    getTemsCertUserNameList({
      currentPage: 1,
      pageSize: 1000,
      resourceName: "",
      sidx: "",
      sort: "desc"
    }).then(res => {
      this.recipientUserList = res.data.list;
    })
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      const params = {
        ...this.userFormLine,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        sort: 'desc',
        sidx: ''
      };
      getTemsCertUserSimpleAllList(params)
        .then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.pagination.total;
        })
        .catch((e) => {
        });
    },
    clearFrom() {
      this.userFormLine = {
        recipientUserName: '',
        resourceName: '',
        resourceId: '',
        enabledMark: '',
      };
      this.currentPage = 1;
      this.tableData = [];
      this.loadData();
    },
    onSearch() {
      this.currentPage = 1;
      this.tableData = [];
      this.loadData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;

    },
    handleSizeChange(val) {
      this.pageSize = val;
      // this.currentPage = 1;
      // this.tableData = [];
      this.loadData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
    },
    // 单条发放
    editCertRow(row) {
      this.batchRemoveFun(row.id)
    },
    // 批量发放
    exportUser() {
      if (this.multipleSelection.length === 0) {
        this.$message.warning('请至少选择一条记录进行发放');
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join(',');
      this.batchRemoveFun(ids)
    },
    batchRemoveFun(ids) {
      batchRemove(ids).then(res => {
        this.$message({
          message: '发放成功',
          type: 'success'
        });
        setTimeout(() => {
          this.clearFrom();
        },500)
      })
    }
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-icon-my-message {
  background: url("../../assets/images/dc.png") no-repeat;
  width: 20px !important;
  height: 20px !important;
}

::v-deep .el-icon-my-message:before {
  content: "替";
  font-size: 20px;
  visibility: hidden;
}

::v-deep .el-icon-my-message {
  font-size: 18px;
}

::v-deep .el-icon-my-message:before {
  content: "\e611";
}

.set-table-btn-col.disabled {
  color: #999 !important;
}

.set-table-btn-col.disabled img {
  filter: grayscale(100%) !important;
}


</style>
